<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>URL重定向</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
</head>
<body class="hold-transition dark-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">
  <nav id="Navbar" class="main-header navbar navbar-expand navbar-dark"></nav>
  <aside id="Container" class="main-sidebar sidebar-dark-primary elevation-4"></aside>
  <div class="content-wrapper" id="Wrapper">
    <section class="content-header" id="WrapperHeader"></section>
    <section class="content">
      <div class="container-fluid">
        <div id="notice"></div>
        <div class="card card-primary">
          <div class="card-header">
            <h3 class="card-title">不安全的URL跳转</h3>
          </div>
          <form action="" onsubmit="return false;">
            <div class="card-body">
              <div class="form-group">
                <label for="url">输入你想去的地址：</label>
                <input type="text" class="form-control" id="url" placeholder="Enter url">
              </div>
            </div>
            <div class="card-footer">
              <button type="submit" class="btn btn-primary" onclick="goUrl()">跳转</button>
            </div>
          </form>
        </div>
        <div class="card card-primary card-outline" id="showSource">
          <div class="card-header">
            <h3 class="card-title">源代码&amp;提示</h3>
          </div>
          <div class="card-body">
            <div>
              <p>这里使用 window.location.href 进行跳转，前端进行校验。可以通过控制台调试尝试绕过。</p>
              <pre><code>&#x20;&#x20;&#x20;&#x20;&#x66;&#x75;&#x6E;&#x63;&#x74;&#x69;&#x6F;&#x6E;&#x20;&#x67;&#x6F;&#x55;&#x72;&#x6C;&lpar;&rpar;&lcub;&NewLine;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x63;&#x6F;&#x6E;&#x73;&#x74;&#x20;&#x69;&#x6E;&#x70;&#x75;&#x74;&#x55;&#x72;&#x6C;&#x20;&equals;&#x20;&dollar;&lpar;&quot;&num;&#x75;&#x72;&#x6C;&quot;&rpar;&lsqb;&#x30;&rsqb;&period;&#x76;&#x61;&#x6C;&#x75;&#x65;&semi;&NewLine;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x63;&#x6F;&#x6E;&#x73;&#x74;&#x20;&#x75;&#x72;&#x6C;&#x50;&#x61;&#x74;&#x74;&#x65;&#x72;&#x6E;&#x20;&equals;&#x20;&sol;&Hat;&#x68;&#x74;&#x74;&#x70;&#x73;&quest;&colon;&#x5C;&sol;&#x5C;&sol;&#x5C;&#x77;&plus;&lpar;&#x5C;&period;&#x5C;&#x77;&plus;&rpar;&ast;&lpar;&colon;&#x5C;&#x64;&plus;&rpar;&quest;&lpar;&#x5C;&sol;&#x5C;&#x77;&ast;&rpar;&ast;&lpar;&#x5C;&quest;&#x5C;&#x53;&ast;&rpar;&quest;&dollar;&sol;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x69;&#x66;&#x20;&lpar;&excl;&#x75;&#x72;&#x6C;&#x50;&#x61;&#x74;&#x74;&#x65;&#x72;&#x6E;&period;&#x74;&#x65;&#x73;&#x74;&lpar;&#x69;&#x6E;&#x70;&#x75;&#x74;&#x55;&#x72;&#x6C;&rpar;&rpar;&#x20;&lcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x6E;&#x6F;&#x74;&#x69;&#x63;&#x65;&lowbar;&#x64;&#x6F;&#x6D;&period;&#x69;&#x6E;&#x6E;&#x65;&#x72;&#x48;&#x54;&#x4D;&#x4C;&#x20;&equals;&#x20;&#x67;&#x65;&#x6E;&#x65;&#x72;&#x61;&#x74;&#x65;&#x4E;&#x6F;&#x74;&#x65;&lpar;&apos;&#x4E0D;&#x6B63;&#x786E;&#x7684;&#x55;&#x52;&#x4C;&#x683C;&#x5F0F;&apos;&rpar;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x72;&#x65;&#x74;&#x75;&#x72;&#x6E;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&rcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x69;&#x66;&#x20;&lpar;&excl;&#x69;&#x6E;&#x70;&#x75;&#x74;&#x55;&#x72;&#x6C;&period;&#x69;&#x6E;&#x63;&#x6C;&#x75;&#x64;&#x65;&#x73;&lpar;&#x62;&#x61;&#x73;&#x65;&#x55;&#x72;&#x69;&rpar;&rpar;&#x20;&lcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x6E;&#x6F;&#x74;&#x69;&#x63;&#x65;&lowbar;&#x64;&#x6F;&#x6D;&period;&#x69;&#x6E;&#x6E;&#x65;&#x72;&#x48;&#x54;&#x4D;&#x4C;&#x20;&equals;&#x20;&#x67;&#x65;&#x6E;&#x65;&#x72;&#x61;&#x74;&#x65;&#x4E;&#x6F;&#x74;&#x65;&lpar;&apos;&#x672A;&#x7ECF;&#x8FC7;&#x9A8C;&#x8BC1;&#x7684;&#x55;&#x52;&#x4C;&apos;&rpar;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x72;&#x65;&#x74;&#x75;&#x72;&#x6E;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&rcub;&NewLine;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x77;&#x69;&#x6E;&#x64;&#x6F;&#x77;&period;&#x6C;&#x6F;&#x63;&#x61;&#x74;&#x69;&#x6F;&#x6E;&period;&#x68;&#x72;&#x65;&#x66;&#x20;&equals;&#x20;&#x69;&#x6E;&#x70;&#x75;&#x74;&#x55;&#x72;&#x6C;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&rcub;</code></pre>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <footer class="main-footer"></footer>
  <script src="../../dist/js/templateHandle.js"></script>
  <script>
    setWrapperHeader("URL重定向", ["不安全的URL跳转"]);
  </script>
  <script src="../../plugins/jquery/jquery.min.js"></script>
  <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../../plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
  <script src="../../dist/js/adminlte.js"></script>
  <script>
    const notice_dom = $("#notice")[0];
    function goUrl(){

      const inputUrl = $("#url")[0].value;

      const urlPattern = /^https?:\/\/\w+(\.\w+)*(:\d+)?(\/\w*)*(\?\S*)?$/;
      if (!urlPattern.test(inputUrl)) {
        notice_dom.innerHTML = generateNote('不正确的URL格式');
        return;
      }
      if (!inputUrl.includes(baseUri)) {
        notice_dom.innerHTML = generateNote('未经过验证的URL');
        return;
      }

      window.location.href = inputUrl;
    }
  </script>
</body>
</html>